<template>
  <div>
    <div
      class="NavBar"
      :class="{ fixed: scrollPosition > 200, indexNav: isIndex }"
    >
      <div class="wrap">
        <div class="left">
          <router-link class="logo" to="/"> {{ site.site_name }} </router-link>
          <div class="phone" v-if="isPhone">
            <i class="el-icon-menu" @click="drawer = true"></i>
          </div>
          <div class="menu" v-if="!isPhone">
            <div class="col" v-for="item in menu" :key="item.id">
              <router-link :to="`/${item.route}`">{{ item.name }} </router-link>
            </div>
          </div>
        </div>
        <div class="right" v-if="!isPhone">
          <div class="icons" v-if="isLogin">
            <div class="pointer userMenu">
              <i class="el-icon-user"></i>
              <ul>
                <li>
                  <router-link to="/user/user">个人中心</router-link>
                </li>
                <li><router-link to="/user/record">已购素材</router-link></li>
                <li><router-link to="/user/collect">我的收藏</router-link></li>
                <!-- <li><router-link to="/user/message">隐私政策</router-link></li>
                <li><router-link to="/user/message">服务协议</router-link></li> -->
                <li class="pointer" @click="logout">
                  <div>退出登录</div>
                </li>
              </ul>
            </div>
            <router-link to="/user/message">
              <i class="el-icon-bell"></i>
            </router-link>
          </div>
          <div class="login pointer" v-else @click="dialogVisible = true">
            登录/注册
          </div>
<!--          <div class="language" pointer>En ></div>-->
        </div>
      </div>
    </div>
    <div class="seat"></div>
    <el-dialog :visible.sync="dialogVisible" width="630px">
      <div class="logContent">
        <div class="tab">
          <span
            class="pointer"
            :class="{ active: type == 'login' }"
            @click="type = 'login'"
            >登录
          </span>
          <span v-if="type == 'login'" class="pointer" @click="type = 'signup'"
            >注册</span
          >
          <span
            v-if="type == 'signup' || type == 'signup2'"
            class="pointer"
            :class="{ active: type == 'signup' }"
            @click="type = 'signup'"
            >邮箱注册</span
          >
          <span
            v-if="type == 'signup' || type == 'signup2'"
            class="pointer"
            :class="{ active: type == 'signup2' }"
            @click="type = 'signup2'"
            >账号注册</span
          >
        </div>
        <login
          v-show="type == 'login'"
          @handleSignup="handleSignup"
          @handleFind="handleFind"
          @openAgree="openAgree"
        ></login>
        <signup
          v-show="type == 'signup'"
          :isLogin.sync="isLogin"
          @handleLogin="handleLogin"
          @handleFind="handleFind"
          @openAgree="openAgree"
          :visible.sync="dialogVisible"
        ></signup>
        <signup2
          v-show="type == 'signup2'"
          :isLogin.sync="isLogin"
          @handleLogin="handleLogin"
          @handleFind="handleFind"
          @openAgree="openAgree"
          :visible.sync="dialogVisible"
        ></signup2>
      </div>
    </el-dialog>

    <find
      ref="findRef"
      @handleLogin="handleLogin"
      @handleSignup="handleSignup"
    ></find>
    <editPswd :visible.sync="edit"></editPswd>
    <el-drawer :visible.sync="drawer" :with-header="false">
      <!-- <drawer></drawer> -->
      <div class="menu">
        <div class="col" v-for="item in menu" :key="item.id">
          <router-link :to="`/${item.route}`">{{ item.name }} </router-link>
        </div>
      </div>
      <div class="mobile">
        <div class="search">
          <el-input
            v-model="value"
            placeholder="请输入关键字搜索产品"
          ></el-input>
          <i class="el-icon-search pointer" @click="search"></i>
        </div>
        <ul v-if="isLogin">
          <li><router-link to="/user/user">个人中心</router-link></li>
          <li><router-link to="/user/record">已购素材</router-link></li>
          <li><router-link to="/user/collect">我的收藏</router-link></li>
          <li class="pointer" @click="logout">
            <div>账号退出</div>
          </li>
        </ul>
        <div class="login pointer" v-else @click="dialogVisible = true">
          登录/注册
        </div>
        <div class="language" pointer>En ></div>
      </div>
    </el-drawer>
    <agreement ref="agreementRef" />
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "NavBar",
  data() {
    return {
      value: "",
      isLogin: false,
      login: false,
      signup: false,
      find: false,
      join: false,
      edit: false,
      isPhone: false,
      drawer: false,
      style_list: [],
      category_list: [],
      is_show: true,
      //
      scrollPosition: "",
      dialogVisible: false,
      type: "login",
      isIndex: true,
      menu: [],
    };
  },
  components: {
    login: () => import("@/components/popup/login.vue"),
    signup: () => import("@/components/popup/signup.vue"),
    signup2: () => import("@/components/popup/signup2.vue"),
    find: () => import("@/components/popup/find.vue"),
    editPswd: () => import("@/components/popup/editPswd.vue"),
    // drawer: () => import("@/components/popup/drawer.vue"),
    agreement: () => import("@/components/popup/agreement.vue"),
  },
  computed: {
    ...mapState(["site"]),
  },
  watch: {
    $route(newVal) {
      if (newVal.fullPath == "/index") {
        this.isIndex = true;
      } else {
        this.isIndex = false;
      }
      if (newVal) {
        this.drawer = false;
      }
    },
  },
  mounted() {
    const token = localStorage.getItem("token");
    if (token) {
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
    window.addEventListener("scroll", this.handleScroll);
    const width = window.innerWidth;
    if (width < 1024) {
      this.isPhone = true;
    }
    this.getCate();
  },
  methods: {
    getCate() {
      this.$post("/index/categories").then((res) => {
        this.menu = res.data;
      });
    },
    handleScroll() {
      this.scrollPosition = window.scrollY;
    },
    handleSignup() {
      this.signup = true;
    },
    handleLogin() {
      this.login = true;
    },
    handleFind() {
      this.$refs.findRef.open();
    },
    search() {},
    logout() {
      this.$confirm("是否要退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.clear();
          this.isLogin = false;
          this.$router.push("/");
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        })
        .catch(() => {});
    },
    openAgree(type) {
      this.$refs.agreementRef.open(type);
    }
  },
};
</script>

<style scoped lang="scss">
// .seat {
//   height: 90px;
// }
:deep .el-dialog {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}
::v-deep .NavBar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 90px;
  z-index: 99;
  background: #fff;

  &.indexNav {
    color: #fff;
    background: rgba($color: #fff, $alpha: 0.3);
    transition: all 0.3s;
    &.fixed {
      background: #fff;
      color: #333;
    }
  }
  .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
  .left,
  .right {
    display: flex;
    align-items: center;
    .icons {
      display: flex;
      align-items: center;
      a {
        display: block;
      }
      i {
        display: block;
        margin-right: 20px;
      }
    }
  }
  .logo {
    font-size: 44px;
    font-weight: bold;
  }
  .menu {
    display: flex;
    font-size: 18px;
    .col {
      margin-left: 46px;
    }
  }
  .login {
    background: #917bbd;
    font-size: 18px;
    line-height: 38px;
    width: 130px;
    text-align: center;
    border-radius: 10px;
    color: #ffffff;
  }
  .language {
    font-size: 18px;
    line-height: 36px;
    width: 60px;
    border: 2px solid #999;
    text-align: center;
    border-radius: 10px;
    margin-left: 10px;
  }
  .userMenu {
    position: relative;
    ul {
      font-size: 14px;
      position: absolute;
      background: #fff;
      width: 100px;
      box-shadow: 0px 0px 13px 0px rgba(171, 171, 171, 0.22);
      text-align: center;
      left: 50%;
      border-radius: 4px;
      overflow: hidden;
      top: 100%;
      transform: translateX(-50%) translateY(20px);
      transition: all 0.3s;
      opacity: 0;
      visibility: hidden;
      color: #000;
      a,
      div {
        display: block;
        padding: 10px 0;
        &:hover {
          background: #917bbd;
          color: #fff;
        }
      }
    }
    &:hover ul {
      opacity: 1;
      visibility: visible;
    }
  }
}

:deep .el-dialog {
  background: transparent;
}
.logContent {
  background: #fff;
  padding: 100px 80px;
  border-radius: 10px;
  .tab {
    color: #999;
    font-size: 26px;
    margin-bottom: 50px;
    span {
      display: inline-block;
      margin-right: 40px;
    }
    .active {
      color: #333;
      font-weight: bold;
    }
  }
}

@media screen and (max-width: 1024px) {
  .NavBar {
    height: 60px;
    .logo {
      font-size: 28px;
    }
    .phone {
      font-size: 32px;
      position: absolute;
      right: 10px;
    }
  }
  :deep .el-drawer {
    width: 70% !important;
    padding: 20px;
    color: #333;
  }
  .menu {
    font-size: 18px;
    line-height: 3;
  }
  .search {
    display: flex;
    align-items: center;
    .el-icon-search {
      font-size: 20px;
      display: block;
      padding-left: 10px;
    }
  }
  .logContent {
    padding: 30px 30px;
  }
  .logContent .tab {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .login {
    padding: 10px 0;
  }
  ul {
    li {
      padding: 10px 0;
      font-size: 16px;
    }
  }
}
@media screen and (max-width: 1024px) {
  .el-message-box {
    width: 90% !important;
  }
  :deep .el-dialog {
    width: 100vw !important;
  }
}
</style>
